
<style>
  .education-program_section {
    position: relative;
    overflow: hidden;
}
.education-program{
  margin-bottom: 0;
}
.landing-text {
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}
.landing-text h2{
  margin: 0;
  max-width: 380px;
  font-size: 36px;
  font-weight: 700;
  line-height: 48px;
  color: #fff;
}
.landing-text .banner__text {
  margin: 20px 0;
  font-size: 16px;
  line-height: 24px;
}
.landing-text a{
  background: var(--2, linear-gradient(180deg, #599BF4 0%, #0D74FF 100%));
}
.landing-text .banner__text p {
    font-size: 16px;
    line-height: 24px;
}


@media screen and (max-width:750px) {
.landing-text h2 {
    max-width: 100%;
    font-size: 24px;
    line-height: 32px;
}
.landing-text {
  text-align: center;
  top: auto;
  transform: none;
  bottom: 20px;
}
.landing-text .banner__text{
   margin-top: 8px;
}
}


</style>
<div class="education-program_section">
  <div class="banner-with-program">
    <div class="bg-image">
      <div class="pc-banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
      {% if section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 | floor }}%;"{% endif %}
    >
      {%- if section.settings.image != blank -%}
        <img
          srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: '165x' }} 165w,{%- endif -%}
            {%- if section.settings.image.width >= 323 -%}{{ section.settings.image | img_url: '323x' }} 323w,{%- endif -%}
            {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%}
            {%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: '535x' }} 535w,{%- endif -%}
            {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
            {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
            {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
            {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
          src="{{ section.settings.image | img_url: '1500x' }}"
          sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1 }}px, (min-width: 750px) calc((100vw - 130px) / 1), calc((100vw - 50px) / 1)"
          alt="{{ section.settings.image.alt | escape }}"
          loading="lazy"
          width="{{ section.settings.image.width }}"
          height="{{ section.settings.image.height }}"
        >
      {%- else -%}
        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
      {%- endif -%}
      </div>
      <div class="mb-banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image_mobile != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
      {% if section.settings.image_mobile != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image_mobile.aspect_ratio | times: 100 }}%;"{% endif %}
    >
      {%- if section.settings.image_mobile != blank -%}
        <img
          srcset="{%- if section.settings.image_mobile.width >= 165 -%}{{ section.settings.image_mobile | img_url: '165x' }} 165w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 323 -%}{{ section.settings.image_mobile | img_url: '323x' }} 323w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 360 -%}{{ section.settings.image_mobile | img_url: '360x' }} 360w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 535 -%}{{ section.settings.image_mobile | img_url: '535x' }} 535w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 750 -%}{{ section.settings.image_mobile | img_url: '750x' }} 750w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 1070 -%}{{ section.settings.image_mobile | img_url: '1070x' }} 1070w,{%- endif -%}
            {%- if section.settings.image_mobile.width >= 1500 -%}{{ section.settings.image_mobile | img_url: '1500x' }} 1500w,{%- endif -%}
            {{ section.settings.image_mobile | img_url: 'master' }} {{ section.settings.image_mobile.width }}w"
          src="{{ section.settings.image_mobile | img_url: '1500x' }}"
          sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1 }}px, (min-width: 750px) calc((100vw - 130px) / 1), calc((100vw - 50px) / 1)"
          alt="{{ section.settings.image_mobile.alt | escape }}"
          loading="lazy"
          width="{{ section.settings.image_mobile.width }}"
          height="{{ section.settings.image_mobile.height }}"
        >
      {%- else -%}
        {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
      {%- endif -%}
      </div>
    </div>
    <div class="landing-text">
      <div class="page-width">
        {%- for block in section.blocks -%}
          {%- case block.type -%}
          {%- when 'heading' -%}
           <h2 class="h1" {{ block.shopify_attributes }}>{{ block.settings.title }}</h2>
          {%- when 'text' -%}
           <div class="banner__text" {{ block.shopify_attributes }}>
            {{ block.settings.text }}
           </div>
          {%- when 'buttons' -%}
          <div class="banner__buttons{% if block.settings.button_label != blank and block.settings.button_link != blank  %} banner__buttons--multiple{% endif %}" {{ block.shopify_attributes }}>
            {%- if block.settings.button_label != blank -%}
              <a {% if block.settings.button_link != blank %}href="{{ block.settings.button_link }}" {% endif %} class="bg-hover button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}" {% if block.settings.button_link == blank %} aria-disabled="true"{% endif %} {{ block.shopify_attributes }}>
                <span>{{ block.settings.button_label | escape }}</span>
              </a>
            {%- endif -%}
          </div>
         {%- endcase -%}  
     {% endfor %}
      </div>
    </div>
  </div>
</div>



{% schema %}
{
  "name": "Landing banner",
  "tag": "section",
  "class": "spaced-section spaced-section--full-width education-program",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "image"
    },
    {
      "type": "image_picker",
      "id": "image_mobile",
      "label": "Mobile image"
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.image-banner.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "html",
          "id": "title",
          "label": "Title"
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.image-banner.blocks.text.name",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "label": "t:sections.image-banner.blocks.text.settings.text.label"
        }
      ]
    },
    {
      "type": "buttons",
      "name": "t:sections.image-banner.blocks.buttons.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "button_label",
          "default": "Button label",
          "label": "Button label",
          "info": "Button label"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "button_link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Landing banner",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "buttons"
        }
      ]
    }
  ]
}
{% endschema %}
